<template>
  <div class="member-order-page">

    <XtxTabs v-model="activeName" @tab-click="tabClick">
      <XtxTabsPanel v-for="item in orderStatus" :key="item.name" :label="item.label" :name="item.name">
        <div v-if="orderList" class="order-list">
          <div v-if="loading" class="loading">
            <p></p>
          </div>
          <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
          <orderItem @on-delete-order="onDeleteOrder(item)" @on-confirm-order="onConfirmOrder(item)"
            @on-cancel-order="onCancelOrder(item)" @on-logistics-order="onLogisticsOrder(item)" v-for="item in orderList" :key="item.id" :order="item"
            :label="item.label" />
        </div>
        <div v-else class="loading"></div>
      </XtxTabsPanel>
    </XtxTabs>

    <!-- 对于像：对话框，消息提示，确认提示，通知组件 适合使用传送门 Teleport -->
    <Teleport to="#dailog">
      <orderCancel ref="orderCancelCom" />
    </Teleport>
    <!-- 查看物理组件 -->
    <Teleport to="#dailog">
      <OrderLogistics ref="logisticsOrderCom" />
    </Teleport>
    <XtxPagination v-if="total > requestParams.pageSize" @current-change="requestParams.page=$event" :total="total"
      :page-size="requestParams.pageSize" :current-page="requestParams.page" />
  </div>
</template>
<script>
import { ref, reactive, watch, getCurrentInstance } from 'vue'
import { orderStatus } from '@/api/constants'
import orderItem from './components/order-item.vue'
import orderCancel from './components/order-cancel.vue'
import OrderLogistics from './components/order-logistics'
import { findOrderList, delteOrder, confirmOrder } from '@/api/order'
export default {
  name: 'MemberOrderPage',
  components: {
    orderItem,
    orderCancel,
    OrderLogistics
  },
  setup() {
    const { proxy } = getCurrentInstance()
    const activeName = ref('all')

    //请求订单的参数  与分页组件相配合
    const requestParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0
    })
    //获取订单状态
    const loading = ref(true)
    const orderList = ref([])
    const total = ref(0)

    const findOrderListFn = () => {
      loading.value = true
      findOrderList(requestParams).then(data => {
        orderList.value = data.result.items
        total.value = data.result.counts
        loading.value = false
      })
    }

    watch(requestParams, () => {
      findOrderListFn()
    }, { immediate: true })

    //tabClick
    const tabClick = (tab) => {
      requestParams.orderState = tab.index
      requestParams.page = 1
    }

    // 删除订单
    const onDeleteOrder = (item) => {
      proxy.$Confirm({ text: '您确认删除该条订单吗？' }).then(() => {
        delteOrder([item.id]).then(() => {
          proxy.$Confirm({ text: '删除订单成功', type: 'success' })
          findOrderListFn()
        })
      }).catch(e => { })
    }

    //确认收货
    const onConfirmOrder = (item) => {
      // item 就是你要确认收货的订单
      proxy.$Confirm({ text: '您确认收到货吗？确认后货款将会打给卖家。' }).then(() => {
        confirmOrder(item.id).then(() => {
          proxy.$message({ text: '确认收货成功', type: 'success' })
          // 确认收货后状态变成 待评价
          item.orderState = 4
        })
      })
    }

    return {
      activeName, orderStatus, orderList,
      tabClick, total, requestParams,
      loading, ...useCancelOrder(),
      onDeleteOrder,
      onConfirmOrder,
      ...useLogisticsOrder()
    }
  }
}

// 封装逻辑-取消订单
export const useCancelOrder = () => {
  const orderCancelCom = ref(null)
  const onCancelOrder = (item) => {
    // item 就是你要取消的订单
    orderCancelCom.value.open(item)
  }
  return { onCancelOrder, orderCancelCom }
}

// 封装逻辑-查看物流
export  const useLogisticsOrder = () => {
  const logisticsOrderCom = ref(null)
  const onLogisticsOrder = (item) => {
    logisticsOrderCom.value.open(item)
  }
  return { onLogisticsOrder, logisticsOrderCom }
}

//http://pcapi-xiaotuxian-front-devtest.itheima.net//member/order/consignment/ 发货接口
</script>
<style scoped lang="less">
.order-list {
  padding: 20px;
}

.order-list {
  padding: 20px;
  position: relative;
  min-height: 400px;
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  background-color: rgba(240, 248, 255, 0.627);
  align-items: center;

  p {
    background: rgba(255, 255, 255, 0) url(../../../assets/images/loding.svg) no-repeat center;
    animation: rot 1s linear infinite;
    background-size: 50px 50px;
    width: 100px;
    height: 100px;

  }
}

.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>